<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" isELIgnored="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ include file="/WEB-INF/views/shared/taglib.jsp"%>
<%
	request.setAttribute("title", "产品");
%>
<%@ include file="/WEB-INF/views/shared/master/weContentHeader.jsp"%>
<style>
/* 搜索 */
.weui-search-bar {
	background-color: #fff;
}

.weui-search-bar__label {
	background-color: #f5f5f5;
	border-radius: 5px;
}

.weui-search-bar:after {
	border-bottom: 0px;
}

.weui-search-bar__cancel-btn {
	color: #1fa0db;
}

/* 险种 */
.grid-button {
	width: 100%;
}

.active {
	color: #2196F3;
	background-color: #f5f5f5 !important;
}

.weui-btn {
	font-size: 0.7rem;
	padding: 6px;
	overflow: visible;
	border-radius: 0px;
	border-bottom: 1px solid #f5f5f5;
}

.weui-tab {
	height: auto;
}

.weui-btn:after {
	border: 0;
}

.weui-btn_default {
	background-color: #fff;
}

.weui-btn_primary {
	background-color: #017cde;
}

.weui-btn_primary:not (.weui-btn_disabled ):active {
	color: rgba(255, 255, 255, 0.6);
	background-color: #017cde;
}

.insuClass>.weui-grid {
	padding: 0px;
}

.weui-grid:before {
	border: 0;
}

.weui-grid:after {
	border: 0;
}

.weui-grids {
	background-color: #fbfbfb;
}

.weui-grids:before {
	border: 0;
}

/* 排序 */
.overflow-hidden {
	overflow: hidden;
}

.nav-ul {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	float: left;
	font-size: 0.8rem;
	color: #999;
	padding: 0.5em 0em;
}

.nav-ul>* {
	position: relative;
	float: left;
	list-style: none;
	margin: 0.2rem 1.1rem;
}

.nav-arrow {
	vertical-align: middle;
	max-height: 0.5rem;
	padding-left: 0.2rem;
	transform: translateY(-0.05rem);
}

/* 底部加载中 */
.weui-loadmore {
	width: 100%;
	padding: 20px;
	margin: 0px;
}

/* 筛选 */
.weui-tabbar {
	position: fixed !important;
}

.weui-tabbar__item1 {
	font-size: 1rem;
	height: 2.8rem;
	padding: 0;
	line-height: 2.8rem;
	box-sizing: border-box;
	-webkit-tap-highlight-color: rgba(180, 180, 180, 0.15);
}

.color-blue {
	color: #fff !important;
	background-color: #1fa0db;
}

.color-white {
	color: #fff;
}

.selectClass>.weui-grid {
	width: 26%;
	border: 1px solid #eee;
	border-radius: 5px;
	padding: 10px 0px;
	margin: 10px;
}

.selPeople>.weui-grid {
	width: 18%;
}

/* 底部栏 */
.weui-tabbar {
	position: fixed !important;
	background-color: #fff;
	padding-top: 5px;
}

.weui-tabbar__icon {
	width: 20px;
	height: 20px;
}

.weui-tabbar__item.weui-bar__item--on .weui-tabbar__label {
	color: #1fa0db;
}
</style>
<div class="goback" data-back-href="<c:url value='/wechat/home/index'/>"></div>



<div class="weui-tab">
	<div class="weui-tab__bd">



		<input type="hidden" class="userIdentity"
			value="${customer.userIdentity}" /> <input type="hidden"
			class="level" name="level" value="${customer.level}" /> <input
			type="hidden" class="allPage" name="allPage" value="${allPage}" /> <input
			type="hidden" class="accPage" name="accPage" value="${accPage}" /> <input
			type="hidden" class="healthPage" name="healthPage"
			value="${healthPage}" /> <input type="hidden" class="MoneyPage"
			name="MoneyPage" value="${MoneyPage}" /> <input type="hidden"
			class="allpage" name="allpage" value="${allPage}" />

		<form class="findInsu" method="post"
			action="<c:url value='/wechat/insu/insuranceClassify/insulist'/>">
			<input type="hidden" class="insuCompany" name="insuCompany" value="" />
			<input type="hidden" class="people" name="people" value="" /> <input
				type="hidden" class="insuTwo" name="insuTwo" value="" /> <input
				type="hidden" class="insuOne" name="insuOne" value="" /> <input
				type="hidden" class="order" name="order" value="insuSortCode" /> <input
				type="hidden" class="upOrDown" name="upOrDown" value="asc" /> <input
				type="hidden" class="pageNum" name="pageNum" value="1" /> <input
				type="hidden" class="isAllPage" name="isAllPage" value="" />
		</form>


		<div style="position: relative;">
			<%-- <div class="weui-flex">	
	<div class="weui-flex__item " style="flex-grow:8;">
		<div class="weui-search-bar" id="searchBar">
		  <form class="weui-search-bar__form">
		    <div class="weui-search-bar__box">
		      <i class="weui-icon-search"></i>
		      <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="">
		      <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
		    </div>
		    <label class="weui-search-bar__label" id="searchText">
		      <i class="weui-icon-search"></i>
		      <span style="font-size: 16px">搜索产品和内容</span>
		    </label>
		  </form>
		  <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
		</div>      				        		
	</div>		    		
	<div class="weui-flex__item" id="filtrate" style="flex-grow:1;margin-top: 12px;text-align: center;">
	 	<img style="width: 20px;height: 20px" src="<c:url value='/images/we/insuranceClassify/icon_select.jpg' />" />		        				    					
	</div>			    		    				    				    		  			
</div> --%>

			<img class="tittleImg" style="width: 100%;"
				src="<c:url value='/images/we/insuranceClassify/tittle.jpg' />" />

			<div class="weui-flex insuBody">
				<div class="weui-flex__item " style="flex-grow: 1;">
					<div class="insuClass">
						<div class="weui-grid js_grid grid-button">
							<a href="javascript:;" class="weui-btn weui-btn_default active"
								data-value="" data-num="0">全部</a>
						</div>
						<div class="weui-grid js_grid grid-button">
							<a href="javascript:;" class="weui-btn weui-btn_default"
								data-value="意外险" data-num="1">意外险</a>
						</div>
						<div class="weui-grid js_grid grid-button">
							<a href="javascript:;" class="weui-btn weui-btn_default"
								data-value="健康险" data-num="2">健康险</a>
						</div>
						<div class="weui-grid js_grid grid-button">
							<a href="javascript:;" class="weui-btn weui-btn_default"
								data-value="财产险" data-num="3">财产险</a>
						</div>
					</div>
				</div>
				<div class="weui-flex__item showInsuList"
					style="flex-grow: 4; background-color: #f5f5f5;">
					<div class="weui-tab" style="position: relative; z-index: 2;">
						<nav class="overflow-hidden">
							<ul class="nav-ul">
								<li id="sort-by-price" style="margin-left: 5px"><span>价格排序</span>
									<img class="nav-arrow" alt=""
									src="<c:url value='/images/we/productList/arrow_none.png' />">
								</li>
								<c:if
									test="${customer.level=='maker'||customer.level=='highMaker'}">
									<li id="sort-by-num" class="levelHide"><span>奖金排序</span> <img
										class="nav-arrow" alt=""
										src="<c:url value='/images/we/productList/arrow_none.png' />">
									</li>
								</c:if>
								<li id="filtrate" style="margin-left: 5px"><span>筛选</span>
								</li>
							</ul>
						</nav>
					</div>
					<div class="weui-panel_body"
						style="height: 24.5rem; overflow: scroll;"></div>
					<div class="weui-loadmore bottomLoadding" hidden
						style="background-color: white; width: 85%">
						<i class="weui-loading"></i> <span class="weui-loadmore__tips">正在加载</span>
					</div>
					<div class="weui-loadmore weui-loadmore_line bottomNomore" hidden
						style="background-color: white; width: 85%">
						<span class="weui-loadmore__tips">没有更多了..</span>
					</div>
				</div>


			</div>

			<div class="select" hidden>
				<div>
					<div
						style="margin: 0px 15px; border-bottom: 1px solid #f5f5f5; padding: 10px 0px; font-weight: bolder;">
						险种</div>
					<div class="selInsuTwo selectClass">
						<c:forEach items="${healthOptions}" var="option">
							<a href="#" class="weui-grid  js_grid healthOptions">
								<p class="weui-grid__label text-left">${option.paramValue}</p>
							</a>
						</c:forEach>
						<c:forEach items="${moneyOptions}" var="option">
							<a href="#" class="weui-grid  js_grid moneyOptions">
								<p class="weui-grid__label text-left">${option.paramValue}</p>
							</a>
						</c:forEach>
						<c:forEach items="${accOptions}" var="option">
							<a href="#" class="weui-grid  js_grid accOptions">
								<p class="weui-grid__label text-left">${option.paramValue}</p>
							</a>
						</c:forEach>
					</div>
				</div>
				<div>
					<div
						style="clear: both; margin: 0px 15px; border-bottom: 1px solid #f5f5f5; padding: 10px 0px; font-weight: bolder;">
						人群</div>
					<div class="selPeople selectClass">
						<c:forEach items="${peoples}" var="people">
							<a href="#" class="weui-grid  js_grid">
								<p class="weui-grid__label text-left">${people.name}</p>
							</a>
						</c:forEach>
					</div>
				</div>
				<div>
					<div
						style="clear: both; margin: 0px 15px; border-bottom: 1px solid #f5f5f5; padding: 10px 0px; font-weight: bolder;">
						保险公司</div>
					<div class="selInsuCompany selectClass">
						<c:forEach items="${companys}" var="company">
							<a href="#" class="weui-grid  js_grid">
								<p class="weui-grid__label text-left">${company.shortName}</p>
							</a>
						</c:forEach>
					</div>
				</div>
				<div class="weui-tabbar" style="z-index: 501;">
					<a href="javaScript:cancel()"
						class="weui-tabbar__item  weui-tabbar__item1"
						style="border-right: 1px solid grey; background-color: white;">
						<div class="icon_name" style="color: black;">取消</div>
					</a> <a href="javaScript:ensure()"
						class="weui-tabbar__item weui-tabbar__item1"
						style="background-color: #1fa0db">
						<div class="icon_name" style="color: white;">确定</div>
					</a>
				</div>
			</div>
			<div class="showloading"
				style="background: rgba(0, 0, 0, 0.3); position: absolute; top: 0px; left: 0px; text-align: center; z-index: 10"
				hidden>
				<img style='width: 70px; height: 70px; margin-top: 250px'
					src='<c:url value='/images/we/insuranceClassify/loading.gif' />'>
			</div>
		</div>


		<div style="height: 2rem;"></div>
	</div>

	<div class="weui-tabbar">
		<a href="<c:url value='/wechat/home/index' />"
			class="weui-tabbar__item">
			<div class="weui-tabbar__icon">
				<img src="<c:url value='/images/we/index/icon_home1.png' />" alt="">
			</div>
			<p class="weui-tabbar__label">首页</p>
		</a> <a href="<c:url value='/wechat/insu/insuranceClassify/showInsu'/>"
			class="weui-tabbar__item  weui-bar__item--on">
			<div class="weui-tabbar__icon">
				<img src="<c:url value='/images/we/index/icon_insu1.png' />" alt="">
			</div>
			<p class="weui-tabbar__label">产品</p>
		</a> <a href="<c:url value='/wechat/share/cloudClass'/>"
			class="weui-tabbar__item">
			<div class="weui-tabbar__icon"
				style="height: 15px; margin-bottom: 2px; margin-top: 2px;">
				<img src="<c:url value='/images/we/index/icon_share1.png' />" alt="">
			</div>
			<p class="weui-tabbar__label">创业</p>
		</a> <a href="<c:url value='/wechat/cust/personCenter/index' />"
			class="weui-tabbar__item">
			<div class="weui-tabbar__icon">
				<img src="<c:url value='/images/we/index/icon_per1.png' />" alt="">
			</div>
			<p class="weui-tabbar__label">我的</p>
		</a>
	</div>
</div>


<%@ include file="/WEB-INF/views/shared/scripts/jquery.jsp"%>
<%@ include file="/WEB-INF/views/shared/scripts/jqweui.jsp"%>
<script>
	var status = 0;
	var colorPrimary = "#999";
	var colorSelected = "#2196F3";
	var url = $.getVirtualPath()
			+ '/wechat/insu/insuranceClassify/toFindInsurance';
	var img_up = "<c:url value='/images/we/productList/arrow_up.png' />";
	var img_down = "<c:url value='/images/we/productList/arrow_down.png' />";
	var img_none = "<c:url value='/images/we/productList/arrow_none.png' />";

	/* 图片隐藏 */
	/* var timer1=setInterval(function(){  
	 $(".tittleImg").animate({height:'0px'},3000);
	 var timer1=setInterval(function(){  
	 $(".tittleImg").hide();
	 },2000); 
	 },3000);  */
	$(function() {
		toselect();
		$(".showloading").width(window.screen.availWidth);
		$(".showloading").height(window.screen.availHeight);/*  - $(".weui-tab").height() */
	})

	//滚动加载
	var pageNum = 1;
	$(".weui-panel_body").scroll(
			function() {
				var $this = $(this);
				viewH = $(this).height();//可见高度 
				contentH = $(this).get(0).scrollHeight;//内容高度
				scrollTop = $(this).scrollTop();//滚动高度
				if (contentH - viewH - scrollTop == 0) {
					$(".bottomLoadding").show();
					pageNum++;
					if (pageNum <= $(".allpage").val()) {
						$(".isAllPage").val("");
						$(".pageNum").val(pageNum);
						setTimeout(function() {
							var formData = $(".findInsu").serialize();
							var action = $(".findInsu").attr("action");
							var html = $.getText(action, formData);
							$(".weui-panel_body").html(
									$(".weui-panel_body").html() + html);
						}, 10);
						setTimeout(function() {
							$(".bottomLoadding").hide();
							console.log("隐藏");
						}, 10);
					} else {
						$(".bottomNomore").show();
						$(".bottomLoadding").hide();

						setTimeout(function() {
							$(".bottomNomore").hide();
						}, 2000);
					}
				}
			})

	//点击一级险选择
	$(".grid-button").click(function() {

		$(this).children().addClass("active");
		$(this).siblings().children().removeClass("active");
		$(".insuOne").val($(this).children().data('value'));
		$(".pageNum").val(1);

		if ($(this).children().data('num') == 0) {
			$(".accOptions").show();
			$(".moneyOptions").show();
			$(".healthOptions").show();
			$(".allpage").val($(".allPage").val());
		} else if ($(this).children().data('num') == 1) {
			$(".accOptions").show();
			$(".moneyOptions").hide();
			$(".healthOptions").hide();
			$(".allpage").val($(".accPage").val());
		} else if ($(this).children().data('num') == 2) {
			$(".accOptions").hide();
			$(".moneyOptions").hide();
			$(".healthOptions").show();
			$(".allpage").val($(".healthPage").val());
		} else {
			$(".accOptions").hide();
			$(".moneyOptions").show();
			$(".healthOptions").hide();
			$(".allpage").val($(".MoneyPage").val());
		}
		toselect();
	});
	//点击按价格排序
	$('#sort-by-price').click(function() {
		$(".isAllPage").val("yes");
		$(".select").hide();
		$(".insuBody").show();
		if (status == 0) {
			status = 1;
			$(this).css("color", colorSelected);
			$(this).children("img").attr("src", img_up);

			$(".order").val("minPremium");
			$(".upOrDown").val("asc");

		} else if (status == 1) {
			status = 2;
			$(this).children("img").attr("src", img_down);

			$(".order").val("minPremium");
			$(".upOrDown").val("desc");

		} else if (status == 2) {
			status = 1;
			$(this).children("img").attr("src", img_up);

			$(".order").val("minPremium");
			$(".upOrDown").val("asc");

		} else if (status == 3 || status == 4) {
			status = 1;
			$(this).css("color", colorSelected);
			$(this).children("img").attr("src", img_up);
			$(this).siblings().css("color", colorPrimary);
			$(this).siblings().children("img").attr("src", img_none);

			$(".order").val("minPremium");
			$(".upOrDown").val("asc");
		}
		toselect();
	});

	//点击按奖金排序
	$('#sort-by-num').click(function() {
		$(".isAllPage").val("yes");
		$(".select").hide();
		$(".insuBody").show();
		if (status == 0) {
			status = 3;
			$(this).css("color", colorSelected);
			$(this).children("img").attr("src", img_up);

			$(".order").val("shareProportionOne");
			$(".upOrDown").val("asc");

		} else if (status == 3) {
			status = 4;
			$(this).children("img").attr("src", img_down);

			$(".order").val("shareProportionOne");
			$(".upOrDown").val("desc");

		} else if (status == 4) {
			status = 3;
			$(this).children("img").attr("src", img_up);

			$(".order").val("shareProportionOne");
			$(".upOrDown").val("asc");

		} else if (status == 1 || status == 2) {
			status = 3;
			$(this).css("color", colorSelected);
			$(this).children("img").attr("src", img_up);
			$(this).siblings().css("color", colorPrimary);
			$(this).siblings().children("img").attr("src", img_none);

			$(".order").val("shareProportionOne");
			$(".upOrDown").val("asc");
		}
		toselect();
	});

	var select = 0;
	//点击筛选
	$('#filtrate').click(function() {
		$(".isAllPage").val("yes");
		//判断是否被选中
		if (select == 0) {
			$(".select").show();
			$(".tittleImg").hide();
			$(".insuBody").hide();
			select = 1;
		} else {
			$(".select").hide();
			$(".tittleImg").show();
			$(".insuBody").show();
			select = 0;
		}
	});

	//点击筛选项目
	$(".selectClass>.weui-grid").click(function() {
		$(this).addClass("color-blue");
		$(this).children().addClass("color-white");
		$(this).siblings().removeClass("color-blue");
		$(this).siblings().children().removeClass("color-white");

		if ($(this).parent().hasClass("selInsuCompany")) {

			$(".insuCompany").val($(this).children().html());

		} else if ($(this).parent().hasClass("selInsuTwo")) {

			$(".insuTwo").val($(this).children().html());

		} else if ($(this).parent().hasClass("selPeople")) {

			$(".people").val($(this).children().html());
		}
	});
	//点击取消按钮
	function cancel() {
		//清空要传输的数据
		$(".insuCompany").val("");
		$(".insuTwo").val("");
		$(".people").val("");

		//清楚被选中的选项
		$(".weui-grid__label").removeClass("color-blue");

		$(".select").hide();
		$(".tittleImg").show();
		$(".insuBody").show();
		$(".selectClass>.weui-grid").removeClass("color-blue");
		$(".selectClass>.weui-grid").children().removeClass("color-white");
		select = 0;

		/* status = 0;
		$("#filtrate").css("color", colorPrimary); */
		toselect();
	}

	//点击确定按钮
	function ensure() {
		//传输数据
		$(".select").hide();
		$(".tittleImg").show();
		$(".insuBody").show();
		select = 0;
		toselect();
	}
	//ajax 传输数据
	function toselect() {
		var formData = $(".findInsu").serialize();
		var action = $(".findInsu").attr("action");
		$.ajax({
			type : "GET",
			url : action,
			data : formData,
			beforeSend : function() {
				$(".showloading").show();
			},
			error : function() {
			},
			success : function(data) { //请求成功时
				$(".weui-panel_body").html(data);
				$(".showloading").hide();
			}
		});
	}
</script>
<%@ include file="/WEB-INF/views/shared/master/weContentFooter.jsp"%>